<template>
	<view class="myPage">
		<scroll-view v-if="dataList.length > 0" scroll-x="false" scroll-y="true">
			<view class="myList">
				<view v-for="(item, index) in dataList" :key="index" class="list-item" @click.stop="handleChoose(item)">
					<view :class="[item.status == '-1' || item.status == '-2' ? 'item-not' : 'item_top']">
						<view class="left">
							<view class="lf_top">
								<text class="je">{{parseInt(item.couponAmount / 100)}}</text>
								<text>元</text>
							</view>
							<text class="lf_bot">{{item.couponType == '1' ? '直减' : '满减'}}优惠券</text>
						</view>
						<view class="right">
							<text class="rt_top">{{item.couponTempName}}</text>
							<view class="rt_cen">
								<text>有效期至</text>
								<text class="rt_time">{{item.effectiveEndTime}}</text>
							</view>
							<view class="rt_bot" @click.stop="showRule(item.id)">
								<text>使用规则</text>
								<image v-if="item.id == showId" :src="`${url}/statics/std/static/arr_up.png`"></image>
								<image v-else :src="`${url}/statics/std/static/arr_down.png`"></image>
							</view>
						</view>
					</view>
					<view class="item_bot" v-if='item.id == showId'>
						{{item.usageRules}}
						<!-- 使用范围：部分商品支付全款及定金可用 会员购自营商品满减优惠券，品牌直发、票务及部分特殊商品除外，最终以实际结算页面为准； 预售商品在定金支付阶段使用，抵扣尾款； 每笔订单仅可使用一张优惠券。 -->
					</view>
				</view>
				<view class="loadMore">{{"没有更多内容了"}}</view>
			</view>
		</scroll-view>
		<view class="noData" v-else style="height: 100%;">
			<image :src="`${url}/statics/std/static/noData.png`"></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	import requestPost, {
		requestGet
	} from '@/utils/request.js';
	import {
		mapGetters
	} from 'vuex'
	import store, {
		GET_SAFEAREA_BOTTOM
	} from '../../store/index.js'
	const img_url = process.env.VUE_APP_BASEURL_IMG_API;
	export default {
		props: ["id", "type"],
		data() {
			return {
				total: 0,
				dataList: [],
				pages: {
					pageNum: 1,
					pageSize: 10
				},
				loadMore: true,
				url: img_url,
				showId: '',
				queryDTO: null
			};
		},
		onLoad: function(option) {
			this.queryDTO = JSON.parse(decodeURIComponent(option.queryDTO));
			console.log('传递过来的订单信息', this.queryDTO)
		},
		computed: {
			...mapGetters([GET_SAFEAREA_BOTTOM])
		},
		mounted() {
			console.log('安全区距离', this.GET_SAFEAREA_BOTTOM);
		},
		onShow() {
			// this.loadMore = true;
			if (!this.id) {
				this.pages = {
					pageNum: 1,
					pageSize: 10
				};
				this.dataList = [];
				this.getList()
			} else {
				this.dataList = [];
				this.getOrderCoupon()
			}
		},
		methods: {
			handleChoose(item) {
				if (!this.id || item.status == '-1' || item.status == '-2') {
					return
				}
				console.log('选择了优惠券', item)
				uni.setStorageSync("choose-Coupon", item);
				uni.navigateBack()
			},
			getOrderCoupon() {
				requestPost('/order/order/selectCouponListByTicket', {
						"refId": this.id,
						"ruleType": this.type
					})
					.then(res => {
						console.log('获取了订单可用优惠券', res)
						if (res.code == 200) {
							this.$nextTick(() => {
								this.dataList = res.data.filter((item) => {
									return item.status != 0;
								});
							})
						}
					})
			},
			showRule(id) {
				if (this.showId == id) {
					this.showId = ''
				} else {
					this.showId = id
				}
			},
			getList() {
				// if(!this.loadMore){
				//   return
				// }
				requestGet('/order/order/selectCouponList', {
					...this.pages
				}).then(res => {
					console.log('获取了优惠券列表数据', res)
					if (res.code === 200) {
						if (res.data.length > 0) {
							this.dataList = res.data.filter((item) => {
								return item.status != 0;
							});
							// if(this.dataList.length < res.total){
							//   this.loadMore = true;
							//   this.pages.pageNum = this.pages.pageNum + 1;
							// }else{
							//   this.loadMore = false;
							// }
						}
					}
					console.log('111111111===', this.loadMore)
				}).catch((err) => console.log('错误了', err))
			},
			goToAdd() {
				uni.navigateTo({
					url: "/page_my/suggestion/add"
				})
			},
			goToDetail(item) {
				uni.navigateTo({
					url: "/page_my/suggestion/details?id=" + item.id
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.myPage {
		position: relative;
		height: 100vh;
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background: #F3F6F5;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		position: relative;
	}

	.timed {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.7);
		line-height: 40rpx;
		position: fixed;
		bottom: 50rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			display: block;
			margin-left: 4rpx;
		}
	}

	.myList {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 32rpx 32rpx 0;



		.list-item {
			width: 100%;
			display: flex;
			flex-direction: column;
			background: url('../../static/coupon_bg.png') no-repeat;
			background-size: 100%;
			margin-bottom: 32rpx;

			.item_top {
				width: 100%;
				height: 224rpx;
				display: flex;
			}

			.item-not {
				width: 100%;
				height: 224rpx;
				display: flex;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: rgba(255, 255, 255, .3);
				}
			}

			.item_bot {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.5);
				line-height: 34rpx;
				margin-top: 24rpx;
				box-sizing: border-box;
				padding: 0 8rpx;
			}

			.left {
				width: 220rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.lf_top {
					display: flex;
					align-items: center;
					margin-bottom: 32rpx;
					margin-top: 8rpx;

					.je {
						font-size: 72rpx;
						font-family: D-DIN-Bold, D-DIN;
						font-weight: 700;
						color: #FF7614;
						line-height: 78rpx;
						margin-right: 8rpx;
					}

					text {
						font-size: 28rpx;
						font-weight: 600;
						color: #3D3D3D;
						line-height: 40rpx;
					}
				}

				.lf_bot {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.7);
					line-height: 34rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 44rpx;

				.rt_top {
					font-size: 32rpx;
					font-weight: 600;
					color: rgba(0, 0, 0, 0.8);
					line-height: 44rpx;
				}

				.rt_cen {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.5);
					line-height: 34rpx;
					margin-top: 8rpx;
					margin-bottom: 34rpx;

					.rt_time {
						margin-left: 8rpx;
					}
				}

				.rt_bot {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.7);
					line-height: 34rpx;
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
						display: block;
						margin-left: 4rpx;
					}
				}
			}

			.top {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				text:first-child {
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.8);
					line-height: 44rpx;
					margin: 24rpx 0 16rpx 0;
				}

				text:last-child {
					width: 102rpx;
					height: 40rpx;
					background: #F6F6F6;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.3);
					line-height: 40rpx;
					text-align: center;
				}

				.active {
					color: #2187FF !important;
					background: #EDF3FE !important;
				}
			}

			.center {
				width: 100%;
				font-size: 28rpx;
				font-family: Alibaba PuHuiTi 2.0-45 Light, Alibaba PuHuiTi 20;
				font-weight: 300;
				color: rgba(0, 0, 0, 0.7);
				line-height: 36rpx;
				word-break: break-all;
				// display: -webkit-box;
				// -webkit-line-clamp: 3; /* 控制最多显示两行 */
				// -webkit-box-orient: vertical;
				// overflow: hidden;
				// text-overflow: ellipsis;
			}

			.images {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				margin: 16rpx 0;

				image {
					flex: 0 0 auto;
					width: 152rpx;
					height: 152rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-right: 24rpx;
				}
			}

			.time {
				width: 100%;
				font-size: 28rpx;
				font-family: Alibaba PuHuiTi 2.0-45 Light, Alibaba PuHuiTi 20;
				font-weight: 300;
				color: rgba(0, 0, 0, 0.5);
				line-height: 36rpx;
				margin-bottom: 24rpx;
			}
		}

		.loadMore {
			display: block;
			width: 100%;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
			text-align: center;
			line-height: 64rpx;
		}
	}

	.footer-btn {
		position: fixed;
		bottom: 34rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 598rpx;
		height: 84rpx;
		background: #2187FF;
		border-radius: 44rpx 44rpx 44rpx 44rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			flex: 0 0 auto;
		}

		text {
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 32rpx;
		}
	}
</style>